<template style="width: 100%">

    <el-container style="height: 100%; border: 1px solid #eee">
        <el-header style="text-align: left ;font-family: 华文行楷;font-size: 24px">
          <i>已发送留言</i>
          <el-button @click="edit" type="info" style="margin-left: 85%" icon="el-icon-edit-outline"></el-button>
        </el-header>

        <el-main>
          <el-card class="box-card" v-for="(item) in tableData" :key="item._id" shadow="hover"
                   style=" font-size: 14px;margin:5px">
            <div slot="header" class="clearfix" style="display: flex;">
              <span class="el-icon-s-custom" style="flex: 1; text-align: left">{{ item.title }}</span>
              <span style="flex: 1">{{ item.createTime }}</span>
              <el-dropdown style="flex: 1; text-align: right">
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <p style="text-align: left">{{ item.commentBlog }}</p>
          </el-card>
        </el-main>

        <el-dialog title="编辑消息" :visible.sync="dialogVisible" :modal-append-to-body='false' :append-to-body="true">
          <Edit/>
        </el-dialog>

    </el-container>

</template>

<script>
  import axios from '@/api/request'
  import Edit from '../editInformation'
  export default {
    name: "message",
    components: {
      Edit
    },
    data() {
      return {
        tableData: [],
        dialogVisible: false
      }
    },
    methods: {
      edit() {
        this.dialogVisible = true;
      }
    },
    created() {
      axios({
        url: "http://localhost:8888/mongodb/all"
      }).then(res => {
        this.tableData = res
      })
    }
  };
</script>


<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>